<script setup lang="ts">
import b1 from '@/assets/b1.mp4'
import b3 from '@/assets/b3.mp4'
import NewLotteryGift from '@/components/NewLotteryGift.vue'
import NewLotteryHeading from '@/components/NewLotteryHeading.vue'
import NewLotteryNumber from '@/components/NewLotteryNumber.vue'
import NewLotteryAnimate from '@/components/NewLotteryAnimate.vue'
import LotteryWonWinners from '@/components/LotteryWonWinners.vue'
import { LotteryDrawingStatus } from '@/enums/lottery'
import { useAppStore } from '@/stores/app'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import LotteryDialog from '@/components/LotteryDialog.vue'
import { useNewLotteryStore } from '@/stores/newlottery'

const appStore = useAppStore()
const newLotteryStore = useNewLotteryStore()
const showLotteryComponents = ref(true)
const showExplosion = ref(false)
const showWinningNumber = ref(false)
const winningNumbers = ref<string[]>([])
const winnersDialogVisible = ref(false)

const openDialog = () => {
  winnersDialogVisible.value = true
  newLotteryStore.getWinners()
}

// 处理开始抽奖事件
const handleStartDraw = async () => {
  showLotteryComponents.value = false
  newLotteryStore.startDrawing()
}

// 处理抽奖完成事件
const handleDrawComplete = async () => {
  showExplosion.value = true
  const numbers = await newLotteryStore.draw()
  winningNumbers.value = numbers
}

function handleExplosionEnd() {
  showExplosion.value = false
  showWinningNumber.value = true
  appStore.switchAudio('LOTTERY_END')
}

function resetDrawingStatus() {
  showLotteryComponents.value = true
  showExplosion.value = false
  showWinningNumber.value = false
  appStore.resetDrawingStatus()
  newLotteryStore.resetDrawingStatus()
  winningNumbers.value = []
}

const paddingTop = ref(0)

function handleResize() {
  const diff = window.innerHeight - 800
  const count = Math.floor(diff / 100)
  paddingTop.value = count * 20
}

onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <main class="relative w-screen h-screen">
    <video class="w-full h-full object-cover" :src="b1" autoplay loop></video>
    <div class="absolute top-0 left-0 w-full h-full pb-28">
      <div
        v-if="appStore.drawingStatus === LotteryDrawingStatus.NOT_STARTED"
        class="h-full flex flex-col justify-between items-center"
      >
        <!-- 标题始终显示在顶部 -->
        <NewLotteryHeading />
        <template v-if="showLotteryComponents">
          <NewLotteryGift />
          <NewLotteryNumber @start-draw="handleStartDraw" />
        </template>
        <template v-else-if="!showExplosion && !showWinningNumber">
          <NewLotteryAnimate :padding-top="paddingTop" @draw-complete="handleDrawComplete" />
        </template>
      </div>

      <LotteryWonWinners @open="openDialog" />

      <LotteryDialog v-model:visible="winnersDialogVisible">
        <div v-for="winner in newLotteryStore.winners" :key="winner.level" class="mb-2">
          <div class="mb-2 text-md 3xl:text-lg 4xl:text-2xl text-white">{{ winner.level }}</div>
          <div class="grid gap-4 p-4 grid-cols-4">
            <div
              v-for="number in winner.numbers"
              :key="number"
              class="relative flex justify-center items-center bg-[#1a1b4b] rounded-lg p-2 overflow-hidden lottery-box"
            >
              <span
                class="text-xl font-bold text-[#ffd700] animate-pulse"
                style="text-shadow: 0 0 10px #ffd700"
              >
                {{ number }}
              </span>
              <div class="absolute inset-0 border-gradient"></div>
            </div>
          </div>
        </div>
      </LotteryDialog>
    </div>

    <!-- 爆炸特效 -->
    <div v-if="showExplosion" class="absolute inset-0 z-50">
      <video
        class="w-full h-full object-cover"
        :src="b3"
        autoplay
        @ended="handleExplosionEnd"
      ></video>
    </div>

    <!-- 中奖号码展示 -->
    <div
      v-if="showWinningNumber"
      class="absolute inset-0 flex flex-col items-center justify-center z-40 bg-black/50"
    >
      <div
        class="grid gap-4 p-4 max-h-96 overflow-y-auto no-scrollbar"
        :class="{
          'grid-cols-1': winningNumbers.length === 1,
          'grid-cols-2': winningNumbers.length > 1 && winningNumbers.length <= 4,
          'grid-cols-3': winningNumbers.length > 4 && winningNumbers.length <= 9,
          'grid-cols-4': winningNumbers.length > 9,
        }"
      >
        <div
          v-for="number in winningNumbers"
          :key="number"
          class="relative flex justify-center items-center bg-[#1a1b4b] rounded-lg p-8 overflow-hidden lottery-box"
        >
          <span
            class="text-4xl font-bold text-[#ffd700] animate-pulse"
            style="text-shadow: 0 0 10px #ffd700"
          >
            {{ number }}
          </span>
          <div class="absolute inset-0 border-gradient"></div>
        </div>
      </div>
      <div class="flex justify-center mt-4">
        <button
          class="px-4 py-1 rounded bg-yellow-600 hover:bg-yellow-400 active:bg-yellow-600"
          @click="resetDrawingStatus"
        >
          <span class="font-semibold text-sm text-red-800">关闭</span>
        </button>
      </div>
    </div>
  </main>
</template>

<style scoped>
.lottery-box {
  position: relative;
  z-index: 1;
}

.border-gradient {
  z-index: -1;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  background-size: 400%;
  animation: gradient 10s linear infinite;
  filter: blur(1px);
}

.border-gradient::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #1a1b4b;
  border-radius: 6px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes numberPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pulse {
  animation: numberPulse 1s infinite;
}
</style>
